import React,{useEffect,useState} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar, Image,
} from 'react-native';
import RefreshFlatList, {RefreshState} from '../widgets/RefreshFlatList';
import OrderItem from './OrderItem';
import screen from '../utils/screen';
import Images from '../images/Images';
import {getffly} from '../utils/common';
import Constants from '../utils/Constants';
import {AppModal} from '../widgets/modal';
import RequestUtil from '../utils/RequestUtil';
import Api from '../utils/Api';

export default ({navigation,tabTitle})=>{

    const [refreshState,setRefreshState] = useState( RefreshState.Idle)
    const [data,setData] = useState([])

    useEffect(()=>{
       getData()

    },[])

    const getData = ()=>{
        AppModal.showLoading()
        RequestUtil.get(Api.taskOrder).then(res=>{
            let data = res.data
            console.log('order data',data)

            let list = findlist(data)
            if(list.length){
                setRefreshState(RefreshState.Idle)
                setData(list)
            }else{
                setRefreshState(RefreshState.EmptyData)
            }

            AppModal.hideTip();
        },error=>{
            AppModal.showError(error.msg)
        })
    }

    const findlist = (allData) => {
        let str = tabTitle
        let list = [];

        for (var i = 0; i < allData.length; i++) {
            if (str === Constants.common.all ) {
                list.push(allData[i]);
            } else {
                var str1 = allData[i].status.toLowerCase();
                // console.log('str1:' + str1)
                // console.log('str:' + str)
                switch (str) {
                    case Constants.common.pending :
                    {
                        if ("pending" === str1 || "reviewing" === str1) {
                            list.push(allData[i]);
                        }
                    }
                        break;
                    case Constants.common.completed :
                    {
                        if ("completed" === str1) {
                            list.push(allData[i]);
                        }
                    }
                        break;
                    default:
                    {
                        if (str1 != "pending" && str1 != "reviewing" && str1 != "completed") {
                            list.push(allData[i]);
                        }
                    }
                }
            }
        }
        console.log('find list',list)
        return list;
    }

    const renderItem = ({item,index})=>{
        console.log('item',item)
        return (
            <OrderItem
                item={item}
                index={index}
                onPress={()=>{
                    navigation.push("OrderDetail", { id: item.id });
                }}
            />
        )
    }

    let emptyComponent = (
        <View style={{ height:screen.PIXEL_400,justifyContent:'center', alignItems: 'center', }}>
            <Image
                source={ Images.empty}
                resizeMode={'contain'}
                style={{ width:screen.PIXEL_200, height: screen.PIXEL_200 }}
            />
            <Text style={{fontFamily:getffly("regular"), color: '#A6C4C3', fontSize: 14, marginTop: screen.PIXEL_30 }}>{Constants.order.no_order}</Text>
        </View>
    )

    return (
        <View style={styles.container}>

            <RefreshFlatList
                contentContainerStyle={{
                    paddingVertical:screen.PIXEL_30,
                    paddingHorizontal:screen.PIXEL_40,
                }}
                refreshState={refreshState}
                renderItem={renderItem}
                data={data}
                footerEmptyDataComponent={emptyComponent}
                onHeaderRefresh={()=>{

                }}

            />
        </View>
    )
}

const styles= StyleSheet.create({
    container:{
        flex:1
    }
})
